<template>
  <div v-if="visible" class="modal-overlay" @click="handleClose">
    <div class="history-modal" @click.stop>
      <div class="modal-header">
        <h3>{{ playerName }} - 完整出牌历史</h3>
        <button class="close-btn" @click="handleClose">✕</button>
      </div>

      <div class="modal-body">
        <div v-if="playerHistory.length === 0" class="empty-history">
          该玩家暂无出牌记录
        </div>
        <div v-else class="history-list">
          <div
            v-for="(record, index) in playerHistory"
            :key="record.id"
            class="history-record"
          >
            <div class="record-header">
              <span class="record-number"
                >#{{ playerHistory.length - index }}</span
              >
              <!-- <span class="record-round">第{{ record.round }}轮</span> -->
              <span class="record-time">{{
                formatTime(record.timestamp)
              }}</span>
            </div>
            <div class="record-content">
              <div v-if="record.cards.length === 0" class="pass-action">
                <span class="pass-text">过牌</span>
              </div>
              <div v-else class="play-action">
                <div class="pattern-info">
                  <span class="pattern-name">{{
                    getPatternName(record.combination.type)
                  }}</span>
                  <!-- <span class="pattern-power"
                    >威力: {{ record.combination.power }}</span
                  > -->
                </div>
                <div class="cards-display">
                  <PokerCard
                    v-for="card in record.cards"
                    :key="card.id"
                    :card="card"
                    size="small"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <button class="btn btn-primary" @click="handleClose">关闭</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { GameHistory } from '../types/game'
import { PATTERN_NAMES, Card } from '../types/card'
import PokerCard from './PokerCard.vue'
import { sortCardsByGuandanRules } from '../utils/cardUtils'

interface Props {
  visible: boolean
  playerId: number
  playerName: string
  history: GameHistory[]
  trumpCard: Card | null
}

interface Emits {
  (e: 'close'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 过滤出该玩家的历史记录，按时间倒序，并对每条记录中的牌进行排序
const playerHistory = computed(() => {
  return props.history
    .filter((record: GameHistory) => record.playerId === props.playerId)
    .reverse() // 最新的在前
    .map((record) => ({
      ...record,
      cards: sortCardsByGuandanRules(record.cards, props.trumpCard),
    }))
})

const handleClose = () => {
  emit('close')
}

const formatTime = (timestamp: Date): string => {
  return timestamp.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  })
}

const getPatternName = (patternType: number): string => {
  return PATTERN_NAMES[patternType as keyof typeof PATTERN_NAMES] || '未知牌型'
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(4px);
}

.history-modal {
  background: var(--poker-green);
  border: 3px solid #ffd700;
  border-radius: var(--border-radius-lg);
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.2);
}

.modal-header h3 {
  color: white;
  font-size: 18px;
  margin: 0;
}

.close-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-md);
}

.empty-history {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
  padding: var(--spacing-xl);
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.history-record {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--border-radius);
  padding: var(--spacing-sm);
  transition: var(--transition);
}

.history-record:hover {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.3);
}

.record-header {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  margin-bottom: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.record-number {
  color: #ffd700;
  font-weight: bold;
  font-size: 14px;
}

.record-round {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
}

.record-time {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  margin-left: auto;
}

.record-content {
  padding: var(--spacing-xs);
}

.pass-action {
  text-align: center;
  padding: var(--spacing-sm);
}

.pass-text {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-style: italic;
}

.play-action {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.pattern-info {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

.pattern-name {
  color: white;
  font-weight: bold;
  font-size: 14px;
  background: rgba(253, 126, 20, 0.3);
  padding: 4px 8px;
  border-radius: 4px;
}

.pattern-power {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

.cards-display {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.modal-footer {
  padding: var(--spacing-md);
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
}

/* 滚动条样式 */
.modal-body::-webkit-scrollbar {
  width: 8px;
}

.modal-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

.modal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .history-modal {
    width: 95%;
    max-height: 85vh;
  }

  .modal-header h3 {
    font-size: 16px;
  }

  .history-record {
    padding: var(--spacing-xs);
  }

  .record-header {
    flex-wrap: wrap;
  }

  .cards-display {
    gap: 4px;
  }
}
</style>
